// VARS
$circle-width: 0.025em; //0.08em;
$circle-width-hover: 0.04em;

// colors default
$primary-color: #2989FF;
$secondary-color: #ccc;
$bg-color: #ffffff;

$primary-color-green: #4db53c;
$primary-color-orange: #dd9d22;

// colors dark skin
$primary-color-dark: #c6ff00;
$secondary-color-dark: #777;
$bg-color-dark: #666;

$primary-color-green-dark: #5fd400;
$primary-color-orange-dark: #e08833;

@mixin rotate($deg) {
	-webkit-transform: rotate($deg);
  -moz-transform: rotate($deg);
  -ms-transform: rotate($deg);
  -o-transform: rotate($deg);
  transform: rotate($deg);
}

@mixin box-sizing($prop) {
	-webkit-box-sizing: $prop;
  -moz-box-sizing: $prop;
  box-sizing: $prop;
}

@mixin transition-property($prop) {
  -webkit-transition-property: $prop;
  -moz-transition-property: $prop;
  -o-transition-property: $prop;
  transition-property: $prop;
}

@mixin transition-duration($prop) {
  -webkit-transition-duration: $prop;
  -moz-transition-duration: $prop;
  -o-transition-duration: $prop;
  transition-duration: $prop;
}

@mixin transition-timing-function($prop) {
  -webkit-transition-timing-function: $prop;
  -moz-transition-timing-function: $prop;
  -o-transition-timing-function: $prop;
  transition-timing-function: $prop;
}


// CIRCLE
// classes 2 extend
.rect-auto {
  clip: rect(auto, auto, auto, auto);
}

.pie {
  position: absolute;
  border: $circle-width solid $primary-color;
  width: 1 - (2 * $circle-width);
  height: 1 - (2 * $circle-width);
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  @include rotate(0deg);
}

.pie-fill {
  @include rotate(180deg);
}

// main
.c100 {
  *,
  *:before,
  *:after {
    @include box-sizing(content-box);
  }

  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  // margin: 0 0.1em 0.1em 0;
  background-color: #a5bed4;

  // center circle to its parent
  &.center {
    float: none;
    margin: 0 auto;
  }

  // bigger size
  &.big {
    font-size: 240px;
  }

  // smaller size
  &.small {
    font-size: 80px;
  }

  // centered value inside circle
  > .Percents {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3.5em;
    margin: 0 auto;
    // line-height: 5em;
    font-size: 0.2em;
    // color: $secondary-color;
    // display: block;
    text-align: center;
    white-space: nowrap;
    @include transition-property(all);
    @include transition-duration(0.2s);
    @include transition-timing-function(ease-out);

    .Item {
      justify-content: center;
      font-weight: bold;
    }

    .Name {
      text-transform: uppercase;
    }

    .No span {
      color: #748599;
    }
  }

  // background inside the circle
  &:after {
    position: absolute;
    top: $circle-width;
    left: $circle-width;
    display: block;
    content: " ";
    border-radius: 50%;
    background-color: $bg-color;
    width: 1 - (2 * $circle-width);
    height: 1 - (2 * $circle-width);
    @include transition-property(all);
    @include transition-duration(0.2s);
    @include transition-timing-function(ease-in);
  }

  // the slice (mask)
  .slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0em, 1em, 1em, 0.5em);
  }

  // circle to show the status
  .bar {
    @extend .pie;
  }

  // loop to create all needed elements automatically
  @for $j from 51 through 100 {
    &.p#{$j} .slice {
      @extend .rect-auto;
    }

    &.p#{$j} .bar:after {
      @extend .pie-fill;
    }

    &.p#{$j} .fill {
      @extend .pie;
      @extend .pie-fill;
    }
  }

  // loop to rotate all 100 circles
  @for $j from 1 through 100 {
    &.p#{$j} .bar {
      @include rotate((360/100 * $j) + deg);
    }
  }

  // hover styles
  &:hover {
    cursor: default;

    > span {
      width: 3.33em;
      line-height: 3.33em;
      font-size: 0.3em;
      color: $primary-color;
    }

    &:after {
      top: $circle-width-hover;
      left: $circle-width-hover;
      width: 1 - (2 * $circle-width-hover);
      height: 1 - (2 * $circle-width-hover);
    }
  }

  // override colors for the dark skin
  &.dark {
    background-color: $secondary-color-dark;

    .bar,
    .fill {
      border-color: $primary-color-dark !important;
    }

    > span {
      color: $secondary-color-dark;
    }

    &:after {
      background-color: $bg-color-dark;
    }

    &:hover {
      > span {
        color: $primary-color-dark;
      }
    }
  }

  // green skin
  &.green {
    .bar,
    .fill {
      border-color: $primary-color-green !important;
    }

    &:hover {
      > span {
        color: $primary-color-green;
      }
    }
  }

  &.green.dark {
    .bar,
    .fill {
      border-color: $primary-color-green-dark !important;
    }

    &:hover {
      > span {
        color: $primary-color-green-dark;
      }
    }
  }

  // orange skin
  &.orange {
    .bar,
    .fill {
      border-color: $primary-color-orange !important;
    }

    &:hover {
      > span {
        color: $primary-color-orange;
      }
    }
  }

  &.orange.dark {
    .bar,
    .fill {
      border-color: $primary-color-orange-dark !important;
    }

    &:hover {
      > span {
        color: $primary-color-orange-dark;
      }
    }
  }
}
